<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="../common/bootstrap_vue.jsp"></jsp:include>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue</title>
</head>
<body>
	<h1>vue组件化应用构建</h1>
	<div id="app-7">
		<ol>
			<todo-item v-for="item in groceryList" v-bind:todo="item"
				v-bind:key="item.id"> </todo-item>
		</ol>
	</div>

	<div id='example-3'>
		<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
		<label for='jack'>Jack</label> <input type="checkbox" id="john"
			value="John" v-model="checkedNames"> <label for='john'>John</label>

		<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
		<label for='mike'>Mike</label> <br> <span>checked names:{{
			checkedNames }}</span>
	</div>
	<script>
		Vue.component('todo-item', {
			//todo-item组件现在接受一个‘prop’，类似于一个自定义属性，这个属性名为todo
			props : [ 'todo' ],
			template : '<li>{{todo.text}}</li>'
		});

		var app7 = new Vue({
			el : '#app-7',
			data : {
				groceryList : [ {
					id : 0,
					text : '蔬菜'
				}, {
					id : 1,
					text : '奶酪'
				}, {
					id : 2,
					text : '水果'
				}, ]
			}
		});

		var example3 = new Vue({
			el : '#example-3',
			data : {
				checkedNames : []
			}
		});
	</script>
</body>
</html>